<template>
  <van-cell-group v-for="item in lists" :key="item">
  <van-cell center :icon="item.img" :title="item.title" :value="item.value" :label="item.label" />
  </van-cell-group> 
  </template>
  
  <script setup>
  const lists = [ {
  img: '/images/avatar1.jpg', title: '食品旗舰店',
  value: '星期一',
  label: "您有一条店铺消息" },
  {
  img: '/images/avatar2.jpg', title: '彩妆旗舰店',
  value: '星期二',
  label: "亲爱的妆粉：" },
  {
  img: '/images/avatar3.png', title: '订阅号消息',
  value: '星期日',
  label: "美妆旗舰店：【新到彩妆新品————卸妆油、腮红等】" },
  {
  img: '/images/new2.jpg', title: '香奈儿官方旗舰店',
  value: '星期六',
  label: "您有一条店铺消息" },
  {
  img: '/images/new3.jpg', title: 'bjd娃娃正版旗舰店',
  value: '星期一',
  label: "您领养的小孩已经寄往您的所在地，请注意查收。" },
  {
  img: '/images/new4.jpg', title: '轻奢手工珠宝旗舰店',
  value: '星期五',
  label: "亲亲这款珍珠项链比较复杂，工期大概一个月哦" },
  {
  img: '/images/avatar4.png', title: '消息号内容',
  value: '星期三',
  label: "服装旗舰店：大量新品到货，速来选购" }
  ]
</script>

<style lang="less" scoped> 
:deep(.van-cell) {
.van-cell   left-icon { 
width: 40px;
height: 40px;
.van-icon   image { 
width: 100%;
height: 100%;
} 
}
.van-cell   title {
.van-cell   label {
white-space: nowrap;
text-overflow: ellipsis; 
overflow: hidden;
width: 165px; 
}
} 
}
</style>